<template>
<div class="topContainer">
<div class="top">
    <div class="logo">
      <img src="../assets/img/logo01.png" alt="" />
    </div>
    <div class="title">
      vtrs{{$t('home.title')}}2.0
    </div>
    <template>
      <el-select
          v-model="language"
          @change="languagechange"
          placeholder="语言">
        <el-option
            v-for="item in languages"
            :key="item.value"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
    </template>
    <div class="avatar" @mouseleave="loginout = false"
         @mouseenter="loginout = true">
      <img src="../assets/img/zhanghu.png" alt="" />
      <div class="nickname" v-show="loginout">
        <div class="loginout">
          <ul>
            <li> <p>{{ this.nickname }}</p> </li>
            <li @click="loginoutHadle"><p>{{$t('home.Logout')}}</p></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
import {get} from "@/assets/js/http";

export default {
  name: "headerBar",
  data(){
    return{
      loginout:false,
      avatar: this.$cookies.get("avatar"),
      nickname: this.$cookies.get("nickname"),
      language:this.$i18n.locale, //语言
      languages:[
        {name:'中文',value:"ch"},
        {name:'English',value:"zh"},
      ]
    }
  },
  methods:{
    languagechange(){
      this.$i18n.locale = this.language;
    },
    loginoutHadle() {
      get("https://course.acktechnologies.com.cn/api/user/logout", {
        token: this.$cookies.get("vtrstoken")
      })
          .then(res => {
            if (res.code === 1) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.$cookies.remove("vtrstoken");
              this.$router.push("./login");
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
    },
  }

}
</script>

<style scoped lang="less">
.topContainer{
  width: 100%;
background-color: #131314;
}
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  height: 56px;
.title {
  height: 56px;
  line-height: 56px;
  font-size: 18px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-align: center;
  flex-grow: 1;
}
/deep/ .el-select{
  width: 100px;
  margin-right: 15px;
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
}
.avatar {
  width: 36px;
  height: 36px;
  background: #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
img {
  display: block;
  width: 24px;
  height: 24px;
}
}
.nickname {
  width: 200px;
  height: 24px;
  font-size: 24px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  letter-spacing: 1px;
  position: absolute;
  bottom: -25px;
  right: 0px;
  z-index: 999;
.loginout {
  width: 100%;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.21);
  cursor: pointer;
ul{
  margin-top: 10px;
}
li{
  width: 100%;
  height: 52px;
  color: #333333;
  background: #FFFFFF;
  text-align: center;
  overflow: hidden;
p{
  width: 100%;
  height: 32px;
  line-height: 32px;
  margin: 10px 0;
}
p:hover{
  background: #EFF6FF;
}
}
li:nth-child(1){
  border-bottom: 1px solid #EBEBEB;
}
}
}
}
.logo {
  width: 104px;
  height: 56px;
  position: relative;
  background-color: #131314;
  img {
    display: block;
    width: 104px;
    height: 37px;
    margin-top: 9px;
  }
}
</style>